<template lang="pug">
    li.nav-item.dropdown.dropdown-xl.no-caret
        a.nav-link.dropdown-toggle#navbarDropdownDemos(href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
            | Landings
            font-awesome-icon.dropdown-arrow(:icon='["fas", "chevron-right"]')
        .dropdown-menu.dropdown-menu-right.animated--fade-in-up.mr-lg-n15(aria-labelledby='navbarDropdownDemos')
            .row.no-gutters
                .col-lg-5.p-lg-3.bg-img-cover.overlay.overlay-primary.overlay-70.d-none.d-lg-block(style='background-image: url("https://source.unsplash.com/mqO0Rf-PUMs/500x350")')
                    .d-flex.h-100.w-100.align-items-center.justify-content-center
                        .text-white.text-center.z-1
                            .mb-3 Multipurpose landing pages for a variety of projects.
                            router-link.btn.btn-white.btn-sm.text-primary.rounded-pill(to='/') View All
                .col-lg-7.p-lg-5
                    .row
                        .col-lg-6
                            h6.dropdown-header.text-primary Applications
                            router-link.dropdown-item(to='/landings/mobile-app') Mobile App
                            router-link.dropdown-item(to='/landings/desktop-app') Desktop App
                            .dropdown-divider.border-0
                            h6.dropdown-header.text-primary Business
                            router-link.dropdown-item(to='/landings/multipurpose') Multipurpose
                            router-link.dropdown-item(to='/landings/agency') Agency
                            router-link.dropdown-item(to='/landings/press') Press
                            router-link.dropdown-item(to='/landings/directory') Directory
                            router-link.dropdown-item(to='/landings/rental') Rental
                            router-link.dropdown-item(to='/landings/real-estate') Real Estate
                            router-link.dropdown-item(to='/landings/classifieds') Classifieds
                            .dropdown-divider.border-0
                            h6.dropdown-header.text-primary Lead Generation
                            router-link.dropdown-item(to='/landings/lead-capture') Lead Capture
                            .dropdown-divider.border-0.d-lg-none
                        .col-lg-6
                            h6.dropdown-header.text-primary Personal
                            router-link.dropdown-item(to='/landings/resume') Resume
                            router-link.dropdown-item(to='/landings/portfolio') Portfolio
                            .dropdown-divider.border-0
                            h6.dropdown-header.text-primary Header Styles
                            router-link.dropdown-item(to='/headers/basic') Basic
                            router-link.dropdown-item(to='/headers/basic-signup') Basic (Signup)
                            router-link.dropdown-item(to='/headers/graphic') Graphic
                            router-link.dropdown-item(to='/headers/graphic-signup') Graphic (Signup)
                            router-link.dropdown-item(to='/headers/inner-page') Inner Page
                            router-link.dropdown-item(to='/headers/nav-only') Nav Only
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class SBProMenuLandings extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
